<!DOCTYPE html>
<html>
  <head>
    <title>LazyLoad Test</title>
    <style>
      fieldset {
        border: 1px solid #afafaf;
        margin-bottom: 1em;
      }

      .log {
        font: 10pt Consolas, Menlo, Monaco, fixed;
        width: 100%;
      }

      #css-status {
        background-color: #fff;
        height: 30px;
        margin: 10px auto;
        width: 100px;
      }

      #n1,#n2,#n3,#n4,#n5 { width: 0; }
    </style>
  </head>
  <body>
    <h1>LazyLoad Test</h1>

    <form>
      <fieldset>
        <legend>JavaScript</legend>

        <p>
          <input type="button" id="btnLoadJS" value="Load JS (sequential calls)">
          <input type="button" id="btnLoadJSSingle" value="Load JS (single call)">
          <label><input type="checkbox" id="jsDelay" checked> Random delay</label>
        </p>

        <p>
          <textarea id="jslog" class="log" rows="15" cols="50"></textarea>
        </p>
      </fieldset>

      <fieldset>
        <legend>CSS</legend>

        <p>
          <input type="button" id="btnLoadCSS" value="Load CSS (sequential calls)">
          <input type="button" id="btnLoadCSSSingle" value="Load CSS (single call)">
          <label><input type="checkbox" id="cssDelay" checked> Random delay</label>
        </p>

        <p>
          <textarea id="csslog" class="log" rows="15" cols="50"></textarea>
        </p>

        <div id="css-status"></div>

        <div id="n1"></div>
        <div id="n2"></div>
        <div id="n3"></div>
        <div id="n4"></div>
        <div id="n5"></div>
      </fieldset>
    </form>

    <script src="js/lazyload.js"></script>
    <script>
      var btnLoadCSS       = document.getElementById('btnLoadCSS'),
          btnLoadCSSSingle = document.getElementById('btnLoadCSSSingle'),
          btnLoadJS        = document.getElementById('btnLoadJS'),
          btnLoadJSSingle  = document.getElementById('btnLoadJSSingle'),
          cssDelay         = document.getElementById('cssDelay'),
          cssLogEl         = document.getElementById('csslog'),
          jsDelay          = document.getElementById('jsDelay'),
          jsLogEl          = document.getElementById('jslog'),

          n1 = document.getElementById('n1'),
          n2 = document.getElementById('n2'),
          n3 = document.getElementById('n3'),
          n4 = document.getElementById('n4'),
          n5 = document.getElementById('n5'),

          cssInterval = null,

          js = [
            'http://pieisgood.org/test/lazyload/js.php?num=1',
            'http://pieisgood.org/test/lazyload/js.php?num=2',
            'http://pieisgood.org/test/lazyload/js.php?num=3',
            'http://pieisgood.org/test/lazyload/js.php?num=4',
            'http://pieisgood.org/test/lazyload/js.php?num=5'
          ];

      function cssComplete() {
        csslog('callback');
      }

      function csslog(message) {
        cssLogEl.value += "[" + (new Date()).toTimeString() + "] " + message + "\r\n";
      }

      function cssPollStart() {
        var check = [n1, n2, n3, n4, n5],
            i, item;

        cssPollStop();

        var links = document.getElementsByTagName('link');

        cssInterval = setInterval(function () {
          for (i = 0; i < check.length; ++i) {
            item = check[i];

            if (item.offsetWidth > 0) {
              check.splice(i, 1);
              i -= 1;

              csslog('stylesheet ' + item.id.substr(1) + ' applied');
            }
          }

          if (!check.length) {
            cssPollStop();
          }
        }, 30);
      }

      function cssPollStop() {
        clearInterval(cssInterval);
      }

      // Returns a delay between 0 and 5000ms if enabled.
      function getCSSDelay() {
          return cssDelay.checked ? Math.floor(Math.random() * 5001) : 0;
      }

      function getCSSUrls() {
          return [
            '/css?num=1&delay=' + getCSSDelay(),
            '/css?num=2&delay=' + getCSSDelay(),
            '/css?num=3&delay=' + getCSSDelay(),
            '/css?num=4&delay=' + getCSSDelay(),
            '/css?num=5&delay=' + getCSSDelay()
          ];
      }

      // Returns a delay between 0 and 5000ms if enabled.
      function getJSDelay() {
          return jsDelay.checked ? Math.floor(Math.random() * 5001) : 0;
      }

      function getJSUrls() {
          return [
            '/js?num=1&delay=' + getJSDelay(),
            '/js?num=2&delay=' + getJSDelay(),
            '/js?num=3&delay=' + getJSDelay(),
            '/js?num=4&delay=' + getJSDelay(),
            '/js?num=5&delay=' + getJSDelay()
          ];
      }

      function jsComplete() {
        jslog('callback');
      }
      
      function jslog(message) {
        jsLogEl.value += "[" + (new Date()).toTimeString() + "] " + message + "\r\n";
      }

      btnLoadCSS.onclick = function () {
        var urls = getCSSUrls();

        cssPollStart();
        csslog('loading (sequential calls)');

        for (var i = 0; i < urls.length; ++i) {
          LazyLoad.css(urls[i], cssComplete);
        }
      }

      btnLoadCSSSingle.onclick = function () {
        cssPollStart();
        csslog('loading (single call)');

        LazyLoad.css(getCSSUrls(), cssComplete);
      }

      btnLoadJS.onclick = function () {
        var urls = getJSUrls();

        jslog('loading (sequential calls)');

        for (var i = 0; i < urls.length; ++i) {
          LazyLoad.js(urls[i], jsComplete);
        }
      }

      btnLoadJSSingle.onclick = function () {
        jslog('loading (single call)');

        LazyLoad.js(getJSUrls(), jsComplete);
      }
    </script>
  </body>
</html>
